<template>
  <div>
    <div>
      <FormPanel
        ref="from"
        :list="formList"
        :cols="3"
        :labelWidth="110"
        :isSubmitBtn="false"
        @formChange="formChangeHandle"
      />
    </div>
    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right'
      }"
    >
      <el-button @click="closeDrawer(1)">关 闭</el-button>
      <!-- <el-button @click="closeDrawer(2)" type="primary">保 存</el-button> -->
      <multiuse-button type="primary" :click="closeDrawer.bind(this, 2)">保 存</multiuse-button>
  </div>
  </div>
</template>

<script>
import {postPackages,getAllbrand,getAllseriess,getAllmodels} from '@/api/omSale/vehicleParameters/vehicleType/index.js'
import { dictionary } from '@/utils/dictMixin';
import Cookies from 'js-cookie';
import moment from 'moment'
export default {
  name: 'zjconfigaddModel',
  mixins: [dictionary],
  data() {
    this.saveData = null;
    return {
      formList: this.createFormList()
    };
  },

  created() {
    this.getList()
  },
  methods: {
    createFormList() {
      return [
        {
          type: 'SELECT',
          label: '品牌名称',
          fieldName: 'brandId',
          placeholder: '请输入...',
          itemList:[],
          rules: [{ required: true, message: '请选择', trigger: 'change' }],
          change:p=>{
            if(p){
              this.formList.map(x=>{
                if(x.fieldName=='seriesId'){
                  x.itemList=[];
                  x.initialValue=''
                }
                if(x.fieldName=='modelId'){
                  x.itemList=[];
                  x.initialValue=''
                }
              })
              this.getSeries(p)
            }else{
              this.formList.map(x=>{
                if(x.fieldName=='seriesId'){
                  x.itemList=[];
                  x.initialValue=''
                }
                if(x.fieldName=='modelId'){
                  x.itemList=[];
                  x.initialValue=''
                }
              })
            }
          }
        },
        {
          type: 'SELECT',
          label: '车系名称',
          fieldName: 'seriesId',
          placeholder: '请输入...',
          rules: [{ required: true, message: '请选择', trigger: 'change' }],
          itemList:[],
          change:p=>{
            if(p){
              this.formList.map(x=>{
                if(x.fieldName=='modelId'){
                  x.itemList=[];
                  x.initialValue=''
                }
              })
              this.getModel(p)
            }else{
              this.formList.map(x=>{
                if(x.fieldName=='modelId'){
                  x.itemList=[];
                  x.initialValue=''
                }
              })
            }
          }
        },
        {
          type: 'SELECT',
          label: '车型名称',
          fieldName: 'modelId',
          placeholder: '请选择...',
          rules: [{ required: true, message: '请选择', trigger: 'change' }],
          itemList:[]
        },
        {
          type: 'INPUT',
          label: '配置代码',
          fieldName: 'configCode',
          placeholder: '请输入...',
          rules: [{ required: true, message: '请输入', trigger: 'blur' },
          { validator: function(rule, value, callback) {
            let myReg = /^[a-zA-Z0-9_]{0,}$/
              if (!myReg.test(value)) {
                return callback(new Error('请输入不含有特殊符号或汉字的代码'));
              }
              callback();
          }, trigger: 'blur' }]
        },
        {
          type: 'INPUT',
          label: '配置名称',
          fieldName: 'configName',
          placeholder: '请输入...',
          rules: [{ required: true, message: '请输入', trigger: 'blur' }]
        },
        {
          type: 'SELECT',
          label: '启用标记',
          fieldName: 'isValid',
          placeholder: '请选择',
          itemList: this.createDictList('1004'),
          initialValue:10041001,
          rules: [{ required: true, message: '请选择', trigger: 'change' }]
        },

        {
          type: 'DATE',
          label: '启用日期',
          fieldName: 'startDate',
          placeholder: '请选择',
          dateType:'exactdate',
          initialValue:moment().format('YYYY-MM-DD'),
          minDateTime:moment().format('YYYY-MM-DD'),
          rules: [{ required: true, message: '请选择', trigger: 'change' }]
        },

      ];
    },
    async getList(){
      let res=await getAllbrand()
      this.formList.find(x=>x.fieldName=='brandId').itemList=res.data.map(x=>({text:x.brandName,value:x.brandId}))
    },
    async getSeries(brandId){
      let res=await getAllseriess({brandId:brandId})
      this.formList.find(x=>x.fieldName=='seriesId').itemList=res.data.map(x=>({text:x.seriesName,value:x.seriesId}))
    },
    async getModel(seriesId){
      let str=this.formList.find(x=>x.fieldName=='brandId').initialValue;
      let res=await getAllmodels({brandId:str,seriesId:seriesId})
      this.formList.find(x=>x.fieldName=='modelId').itemList=res.data.map(x=>({text:x.modelName,value:x.modelId}))
    },
    formChangeHandle(val) {
      this.saveData = val;
    },
    async closeDrawer(type){
      if(type==1){
        this.$emit('close')
      }else{
        this.$refs.from.SUBMIT_FORM();
        console.log(this.saveData, 'this.saveData');
        if (this.saveData) {
          let json = JSON.parse(JSON.stringify(this.saveData));
          let res = await postPackages(json);
          if (res.resultCode == 200) {
            this.$notify({
              title: '成功',
              message: '保存成功',
              type: 'success'
            });
            this.$emit('close', json);
          }else{
            this.saveData=null;
          }
        }

      }
    }
  }
};
</script>

<style lang="less" scoped></style>
